import React from 'react';
import { IconC, CardC, NormalCardC, FirstHeaderC, SecondHeaderC } from '../../comps';
class CardCDemo extends React.Component {
  constructor() {
    super();
    this.state = {};
  }
  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='卡片' />
        <div>
          <div style={{ marginBottom: '20px' }}>
            <SecondHeaderC title='基本场景' />
            <div style={{ display: 'flex' }}>
              <CardC style={{ margin: '10px' }} />
              <CardC cardId={'1'} style={{ margin: '10px' }} width={'600px'} height={'200px'} />
            </div>
          </div>
          <div style={{ marginBottom: '20px' }}>
            <SecondHeaderC title='给卡片加内容,点击事件抛出cardId' />
            <CardC
              cardId={'2'}
              Top={
                <div style={{ display: 'flex' }}>
                  <p style={{ flex: '1' }}>富士民-现金货币1号基金</p>
                  <IconC
                    type={'edit'}
                    onClick={(e) => {
                      console.log('编辑点击事件', e);
                    }}
                  />
                </div>
              }
              Content={<div>Content</div>}
              onClick={(e) => {
                console.log('卡片点击事件', e);
              }}
            />
          </div>
        </div>
        <div>
          <div style={{ marginBottom: '20px' }}>
            <SecondHeaderC title='第二种卡片基本场景' />
            <div style={{ display: 'flex' }}>
              <NormalCardC style={{ margin: '10px' }} />
              <NormalCardC cardId={'1'} style={{ margin: '10px' }} width={'calc(50% - 20px)'} height={'200px'} />
            </div>
          </div>
          <div style={{ marginBottom: '20px' }}>
            <SecondHeaderC title='给卡片2加内容,点击事件抛出cardId' />
            <NormalCardC
              cardId={'3'}
              Content={<div style={{ backgroundColor: 'red', width: '100%', height: '100%' }}>Content</div>}
              onClick={(e) => {
                console.log('卡片点击事件', e);
              }}
            />
          </div>
        </div>
      </div>
    );
  }
}
export default CardCDemo;
